<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="建房造价">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- 步骤条 -->
		<view class="liucheng">
			<view class="d-flex align-items liucheng-next">
				<view class="d-flex align-items step-one justify-content-center" :current="current"
					@click="stepclick(step)" v-for="(step,index) in stepLists" :key="index">
					<view class="">
						<view :class="current >= index ? 'step-one-num-xz' : 'step-one-num'">{{step.num}}</view>
						<view :class="current == index ? 'fg_xz' : current < index ? 'fg':'fg_xz_h'">{{step.stepName}}
						</view>
					</view>
					<view :class="current >= index ? 'step-line_xz' : 'step-line'" v-if="index < 2"></view>
				</view>
			</view>
		</view>
		<!-- 选择风格 -->
		<view class="w-690" v-if="current == 0">
			<view class="top-choose">请选择一种您喜欢的风格</view>
			<view class="fengge-list d-flex align-items justify-content-space-between">
				<view :class="fg_current == fengGe.id ? 'fengge_xz' : 'choose-fengge'" :current="fg_current" @click="choose_fengge(fengGe)" v-for="(fengGe,index1) in feng_ge_lists" :key="index1">
					<image :src="fengGe.image_url" mode="widthFix" class="fenggeImg"></image>
					<view :class="fg_current == fengGe.id ? 'fengge-t-xz' : 'fengge-t'">{{fengGe.name}}</view>
				</view>
			</view>
		</view>
		
		<!-- 填写信息 -->
		<view class="w-690" v-if="current == 1 || current == 2">
			<view class="top-choose">填写您的建房需求信息</view>
			<view class="jianfang-info">
				<view class="jianfang-w">
					<view class="d-flex align-items">
						<view class="cs">所在城市</view>
						<view class="righttx d-flex align-items" @click="chooseCity">
							<view class="top-txt">{{adress}}</view>
							<image class="qm" src="../static/right.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items justify-content-space-between">
						<view class="d-flex align-items">
							<view class="cs">输入面宽</view>
							<input type="text" class="miankuan" v-model="miankuan" />
							<view class="cs">米</view>
						</view>
						<view class="d-flex align-items">
							<view class="cs">输入进深</view>
							<input type="text" class="miankuan" v-model="jinshen" />
							<view class="cs">米</view>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items justify-content-space-between">
						<view class="d-flex align-items">
							<view class="cs">扣除庭院</view>
							<input type="text" class="miankuan" v-model="tingyuan" />
							<view class="cs">m²</view>
						</view>
						<view class="d-flex align-items">
							<view class="cs">露台扣除</view>
							<input type="text" class="miankuan" v-model="lutai" />
							<view class="cs">m²</view>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items justify-content-space-between">
						<view class="d-flex align-items">
							<view class="cs">结构形式</view>
							<view class="jiegou">
								<uni-data-select v-model="value_jiegou" :localdata="jiegou_range" @change="jiegou_change"
									:clear="false"></uni-data-select>
							</view>
						</view>
						<view class="d-flex align-items">
							<view class="cs">屋顶形式</view>
							<view class="jiegou">
								<uni-data-select v-model="value_wuding" :localdata="wuding_range" @change="wuding_change"
									:clear="false"></uni-data-select>
							</view>
						</view>
					</view>
					<view class="margin-top-30 d-flex align-items justify-content-space-between">
						<view class="d-flex align-items">
							<view class="cs">地上层数</view>
							<input type="text" class="miankuan" v-model="cengshu" />
							<view class="cs">层</view>
						</view>
						<view class="d-flex align-items">
							<view class="cs">地下室</view>
							<view class="jiegou">
								<uni-data-select v-model="dixiashi_value" :localdata="dixiashi_range" @change="dixiashi_change"
									:clear="false"></uni-data-select>
							</view>
						</view>
					</view>
					<!-- 手机号码 -->
					<view class="margin-top-30 d-flex align-items">
						<view class="cs">手机号码</view>
						<view class="righttx">
							<input type="text" class="top-txt" v-model="phone" />
						</view>
					</view>
					<!-- <view class="margin-top-30 d-flex align-items">
						<view class="yam"></view>
						<view class="d-flex align-items">
							<input type="text" class="zhengma" v-model="yanzhengma" />
							<view class="wrap" style="width: 180rpx;">
								<u-toast ref="uToast"></u-toast>
								<u-code :seconds="seconds" ref="uCode" @change="codeChange"></u-code>
								<button class="getbtn" @tap="getCode">{{tips}}</button>
							</view>
						</view>
					</view> -->
					<view class="liji-btn">
						<u-button color="#FF6400" @click="get_zaojia" text="立即获取造价单"></u-button>
					</view>
					<view class="liji-btn">
						<u-button color="#FF6400" @click="up_step" text="上一步"></u-button>
					</view>
					<!-- 获取造价弹窗 -->
					<view class="">
						<u-popup :show="show_zaojia" mode="center" bgColor="transparent" :round="10" @close="close">
							<view class="zaojia-bg">
								<view class="zaojia-tit">造价估算金额</view>
								<view class="zaojia-num">{{jine_num}}</view>
								<view class="chayi">不同地域人、材、机有差异</view>
								<view class="zj-qr">
									<u-button color="#FF6400" @click="queren" text="确认"></u-button>
								</view>
								<view class="cankao">此报价仅作为参考</view>
							</view>
						</u-popup>
					</view>
				</view>
			</view>
		</view>
		<u-picker :show="showcity" ref="uPicker" @cancel="cancel" :columns="columns" @confirm="confirm"
			@change="changeHandler" keyName="t_name"></u-picker>
	</view>
</template>

<script>
	import {
		tree
	} from '@/api/citys.js'
	import {
		getyusuan,
		getfengge,
		getwuding,
		getjiegou
	} from '@/api/user.js'
	export default {
		data() {
			return {
				showcity: false,
				fg_current:'',
				adress: '请选择省/市',
				cityname: '',
				phone: '',
				seconds: 30,
				tips: '',
				shiname: '',
				quname: '',
				shiid: '',
				shengid: '',
				columns: [],
				current: 0,
				miankuan: '',
				jinshen: '',
				jine_num:'',
				tingyuan: '',
				cengshu: '',
				lutai: '',
				value_wuding: 0,
				wuding_range: [], //屋顶形式数组
				value_jiegou: 0,
				jiegou_range: [],
				dixiashi_value: 0,
				dixiashi_range: [{
						value: 0,
						text: "不确定"
					}, {
						value: 1,
						text: "有"
					},
					{
						value: 2,
						text: "无"
					}
				],
				stepLists: [{
					id: 0,
					num: "1",
					stepName: '选择风格'
				}, {
					id: 1,
					num: "2",
					stepName: '填写信息'
				}, {
					id: 2,
					num: "3",
					stepName: '获取造价'
				}],
				feng_ge_lists: [],
				
				show_zaojia: false,
			}
		},
		async onLoad() {
			await this.getProvinces()
			this.get_fengge()
			this.get_wuding_list()
			this.get_jiegou_list()
		},
		methods: {
			// 获取屋顶列表
			get_wuding_list() {
				getwuding({}).then(res => {
					console.log("获取屋顶形式", res);
					if (res.code == 1) {
						let b = []
						for (let s of res.data.wuding_list) {
							b.push({
								value: s.id,
								text: s.name
							})
						}
						this.wuding_range = b
					}
				})
			},
			wuding_change(e) {
				console.log("这是屋顶选择的", e);
				this.value_wuding = e
			},
			// 获取结构形式列表
			get_jiegou_list() {
				getjiegou({}).then(res => {
					console.log("获取屋顶形式", res);
					if (res.code == 1) {
						let c = []
						for (let s of res.data.jiegou_list) {
							c.push({
								value: s.id,
								text: s.name
							})
						}
						this.jiegou_range = c
					}
				})
			},
			jiegou_change(e) {
				console.log("选择结构形式", e);
				this.value_jiegou = e
			},
			dixiashi_change(e) {
				console.log("选择地下室", e);
				this.dixiashi_value = e
			},
			// 风格获取
			get_fengge(){
				getfengge({}).then(res => {
					console.log("获取风格");
					if(res.code == 1){
						this.feng_ge_lists = res.data.fengge_list
					}
				})
			},
			choose_fengge(e){
				console.log("风格选中了第几个",e);
				this.fg_current = e.id
				setTimeout(() => {
					this.current = 1
				},200)
			},
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				if (typeof this.$util.prePage().get_jianfang_list == 'function') {
					this.$util.prePage().get_jianfang_list()
				}
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			close() {
				this.show_zaojia = false
			},
			queren() {
				this.show_zaojia = false
				this.current = 2
				setTimeout(() => {
					uni.switchTab({
						url:'/pages/index/index'
					})
				},500)
			},
			// 获取验证码
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					var data = {
						account: this.phone,
						event: 'register',
					}
					send(data).then(res => {
						if (res.code == 1) {
							if (res.data.code) {
								uni.showModal({
									title: '验证码',
									content: res.data.code
								})
							}
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})

				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			
			stepclick(step) {
				console.log("dianjil", step);
			},
			chooseCity() {
				console.log("eeeee", this.columns);
				this.showcity = true
			},
			// 省市区
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columns[0][index].children)
					// picker.setColumnValues(2, this.columns[0][index].children[0].children)
				}
				// if (columnIndex === 1) {
				// 	console.log(e, indexs);
				// 	// picker为选择器this实例，变化第二列对应的选项
				// 	picker.setColumnValues(2, this.columns[0][indexs[0]].children[indexs[1]].children)
				// }
				console.log("columnIndex", columnIndex);
			},
			confirm(e) {
				console.log("选择省市",e);
				this.cityname = e.value[0].name
				this.shengid = e.value[0].id
				this.shiname = e.value[1].name
				this.shiid = e.value[1].id
				this.adress = this.cityname + '/' + this.shiname
				this.showcity = false
			},
			cancel(e) {
				this.showcity = false
			},
			// 获取省市县接口数据
			async getProvinces() {
				var data = {
					pid: 0
				}
				await tree(data).then(res => {
					console.log("选择了第几个", res);
					if (res.code == 1) {
						this.columns[0] = res.data
						this.columns[1] = res.data[0].children
						// this.columns[2] = res.data[0].children[0].children
					}

				})
			},
			up_step(){
				this.current = 0
			},
			// 立即获取工程造价
			get_zaojia() {
				if(!uni.getStorageSync('token')) {
					uni.showToast({
						title:'请登录后查看',
						icon:'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url:'/pages/login/login'
						})
					},500)
					return
				}
				var data = {
					province_id: this.shengid,
					city_id: this.shiid,
					miankuan: this.miankuan,
					jinshen: this.jinshen,
					tingyuan:this.tingyuan,
					loutai:this.lutai,
					jiegou_id: this.value_jiegou,
					wuding_id: this.value_wuding,
					fengge_id: this.fg_current,
					cengshu: this.cengshu,
					dixiashi: this.dixiashi_value,
					shoujihao: this.phone
				}
				if(!data.province_id || !data.city_id){
					uni.showToast({
						title:'请选择省市',
						icon:'none'
					})
					return
				}
				if(!data.miankuan){
					uni.showToast({
						title:'请填写面宽',
						icon:'none'
					})
					return
				}
				if(!data.jinshen){
					uni.showToast({
						title:'请填写进深',
						icon:'none'
					})
					return
				}
				if(!data.shoujihao){
					uni.showToast({
						title:'请填写手机号',
						icon:'none'
					})
					return
				}
				getyusuan(data).then(res => {
					console.log("获取装修预算",res);
				this.show_zaojia = true
				
					if(res.code == 1){
						this.jine_num = res.data.yusuan 
					}
				})
			},

		}
	}
</script>

<style>
	.chayi {
		font-size: 30rpx;
		font-weight: normal;
		text-align: center;
		color: #7A7A7A;
		margin-bottom: 20rpx;
	}

	.cankao {
		font-size: 24rpx;
		font-weight: normal;
		line-height: 56rpx;
		text-align: center;
		color: #7A7A7A;
	}

	.zj-qr {
		width: 480rpx;
		margin: auto;
		margin-top: 40rpx;
	}

	.zaojia-num {
		font-size: 64rpx;
		font-weight: 700;
		color: #FF6400;
		text-align: center;
		margin-top: 80rpx;
	}

	.zaojia-tit {
		font-size: 40rpx;
		font-weight: 600;
		color: #232323;
		text-align: center;
		padding-top: 80rpx;
	}

	.zaojia-bg {
		width: 640rpx;
		height: 574rpx;
		background: url('https://lianfan.nccpu.cn/image/zaojia.png') no-repeat;
		background-size: 100% auto;
	}

	.getbtn {
		width: 180rpx;
		height: 70rpx;
		border: 1px solid #EEEEEE;
		outline: none;
		background: #F6F6F6;
		font-size: 24rpx;
		color: #999999;
	}

	.liji-btn {
		width: 630rpx;
		margin: auto;
		margin-top: 30rpx;
	}

	.yam {
		width: 180rpx;
		background-color: #333333;
	}

	.zhengma {
		width: 319rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin: 0 16rpx;
	}

	.jiegou {
		width: 180rpx;
		margin: 0 16rpx;
	}

	.miankuan {
		width: 120rpx;
		height: 64rpx;
		font-size: 26rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin: 0 16rpx;
		text-align: center;
	}

	.jianfang-w {
		width: 650rpx;
		margin: auto;
	}

	.cs {
		font-size: 24rpx;
		color: #333333;
	}

	.righttx {
		width: 500rpx;
		height: 64rpx;
		border-radius: 8rpx;
		border: 2rpx solid #EEEEEE;
		opacity: 1;
		margin-left: 16rpx;
		display: flex;
		align-items: center;
	}

	.qm {
		width: 18rpx;
		display: block;
		padding: 10rpx 20rpx;
		margin-left: 10rpx;
	}

	.top-txt {
		width: 455rpx;
		font-size: 26rpx;
		color: #333333;
		padding-left: 10rpx;
	}

	.jianfang-info {
		width: 690rpx;
		background: #fff;
		border-radius: 10rpx;
		margin: auto;
		padding: 40rpx 0rpx;
	}

	.fengge-list {
		flex-wrap: wrap;
	}

	.w-690 {
		width: 690rpx;
		margin: auto;
	}

	.top-choose {
		font-size: 32rpx;
		font-weight: 600;
		line-height: 100rpx;
		color: #9E9E9E;
		margin-top: 30rpx;
	}

	.fengge-t, .fengge-t-xz {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 50rpx;
		color: #333333;
		text-align: center;
		padding: 10rpx 0;
	}
	.fengge-t-xz {
		color: #fff !important;
	}

	.fenggeImg {
		width: 335rpx;
		display: block;
	}

	.choose-fengge {
		width: 335rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 25rpx;
	}
	.fengge_xz {
		width: 335rpx;
		background-color: #ff6400;
		border-radius: 10rpx;
		margin-bottom: 25rpx;
	}

	.liucheng-next {
		width: 92%;
		margin: auto;
		height: 152rpx;
	}

	.step-line_xz {
		width: 120rpx;
		height: 2px;
		margin-top: -50rpx;
		background-color: #FF6400;
	}

	.step-line {
		width: 120rpx;
		height: 2px;
		margin-top: -50rpx;
		background-color: #dadbde;
	}

	.fg_xz_h {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 32.81rpx;
		text-align: center;
		color: #1D2129
	}

	.fg_xz {
		font-size: 28rpx;
		font-weight: 600;
		line-height: 32.81rpx;
		text-align: center;
		color: #FF6400
	}

	.fg {
		font-size: 28rpx;
		font-weight: normal;
		line-height: 32.81rpx;
		text-align: center;
		color: #86909C
	}

	.step-one-num-xz {
		width: 50rpx;
		height: 50rpx;
		font-size: 26rpx;
		margin: auto;
		font-weight: 600;
		color: #fff;
		border-radius: 50%;
		background: #FF6400;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step-one-num {
		width: 50rpx;
		height: 50rpx;
		font-size: 26rpx;
		margin: auto;
		color: #86909C;
		border-radius: 50%;
		background: #F2F3F5;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.step-one {
		/* width: 25%; */
		margin-left: 24rpx;
	}

	.liucheng {
		width: 750rpx;
		height: 152rpx;
		background-color: #fff;
		margin-top: 2px;
	}

	page {
		background-color: #F7F8FB;
	}

	.u-nav-slot {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		border-radius: 100rpx;
		border: 1px solid #dadbde;
		padding: 8rpx 18rpx;
	}
</style>